<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>

</body>
<script type="text/javascript">
  var res = new Date()
  var res1 = res.getMonth()
  console.log(res,res1+1)

  export default {
    data () {
      return {
        scrollY: 0, // 右侧列表滑动的Y轴坐标: srollY  在右侧滑动过程中不断变化
        tops: [], // 右侧所有分类的top的数组: tops  列表显示确定其值
      }
    },
    computed: {
      ...mapState({
        goods: state => state.shop.goods
      }),
      // 当前分类的下标
      currentIndex () {
        // 取出相关数据
        const {scrollY, tops} = this
        // 计算得到结果并返回
        /*
        tops:  [0, 4, 9, 15, 18]
        scrollY: [top, nextTop)
         */
        const index = tops.findIndex((top, index) => {
          return scrollY>=top && scrollY<tops[index+1]
        })
        // 如果前后产生index不同
        if(this.index!==index && this.leftScroll) {
          // 保存index
          this.index = index
          // 得到对应的左侧分类li
          const li = this.$refs.leftUl.children[index]
          //当当前分类下标发生改变时, 让左侧列表滑动当前分类的位置
          this.leftScroll.scrollToElement(li, 300)
        }
        return index
      }
    },
    methods: {
      // 读取右侧所有分类的top值的数组
      _initTops () {
        const tops = []
        let top = 0
        tops.push(top)
        // 得到所有li
        const lis = this.$refs.rightUl.children
        Array.from(lis).forEach(li => {
          top += li.clientHeight
          tops.push(top)
        })
        // 更新tops状态
        this.tops = tops
        console.log('tops', tops)
      },
      // 初始化滚动
      _initScroll () {
        this.leftScroll = new BScroll('.menu-wrapper', { // better-scroll禁用了原生 dom事件
          click: true, // 标识分发自定义click事件
        })
        this.rightScroll = new BScroll('.foods-wrapper', {
          click: true,
          probeType: 1  // 非实时, 触摸
          // probeType: 2  // 实时, 触摸
          // probeType: 3    // 实时, 触摸/惯性
        })
        // 给右侧列表绑定scroll监听
        this.rightScroll.on('scroll', ({x, y}) => {
          console.log('scroll', x, y)
          this.scrollY = Math.abs(y)
        })
        // 给右侧列表绑定scrollEnd监听
        this.rightScroll.on('scrollEnd', ({x, y}) => {
          console.log('scrollEnd', x, y)
          this.scrollY = Math.abs(y)
        })
      },
      // 点击左侧分类项的回调
      selectItem (index) {
        // alert(index)
        // 得到对应的top
        const top = this.tops[index]
        // 立即更新scrollY为目标位置的值
        this.scrollY = top
        // 让右侧列表滑动到对应位置
        this.rightScroll.scrollTo(0, -top, 300)
      }
    },
    watch: {
      goods () { // goods状态数据更新了
        this.$nextTick(() => { // 界面更新 ---列表显示了
          this._initScroll()
          this._initTops()
        })
      }
    }
  }
</script>
</html>
